<template>
    <div class="plantSelect">
        <el-select @change="categoryChange" v-model="plantPageParam.categoryId" class="selectItem" placeholder="请选择类群"
            clearable>
            <el-option v-for="item in categoryOptions" :label="item.categoryName" :value="item.categoryId" />
        </el-select>
        <el-cascader @change="familyChange" v-model="plantPageParam.familyIds" :options="familyList" :props="props1"
            placeholder="请选择科属" clearable />
        <el-select style="margin-left: 20px;" placeholder="请选择种名" clearable></el-select>
    </div>
    <el-empty v-if="pageTotal === 0" description="抱歉没有找到相关的作品" />
    <el-space wrap>
        <el-card v-for="(item, index) in plantList" :body-style="{ padding: '0px' }" class="plantItem"
            @click="toDetail(item.plantId)">
            <img :src="item.plantPicture" class="image" />
            <div style="padding: 14px">
                <span>{{ item.plantName }}</span>
                <div class="bottom">
                    <span class="time">{{ item.address }}</span>
                    <span class="author">{{ formatterDate(item.createTime) }}</span>
                </div>
            </div>
        </el-card>
    </el-space>
    <div class="pageBlock">
        <el-pagination v-model:current-page="plantPageParam.currentPage" v-model:page-size="plantPageParam.pageSize"
            :page-sizes="[15, 25, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>
  
<script setup lang="ts">
import { usePlantListApi } from '@/api/plant/plant';
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router';
import { useCategoryListApi, useFamilyTreeApi } from '@/api/plant/category'
import { useRequest } from 'vue-request';
import { formatterDate } from '@/util/dateFormat';
import store from '@/stores';

const router = useRouter()

const pageParam = reactive({
    currentPage: 1,
    pageSize: 1000
})
const familyList = reactive([])

const props1 = {
    expandTrigger: 'hover' as const,
    checkStrictly: true,
    value: 'familyId',
    label: 'familyName',
    children: 'child',
}

const { data } = useRequest(useCategoryListApi(pageParam))
const categoryOptions = computed(() => {
    return data.value?.data || []
})
const categoryChange = async (val: any) => {
    query()
    if (val !== '') {
        familyList.length = 0
        const { data } = await useFamilyTreeApi(val)
        Object.assign(familyList, data)
    }
}
const familyChange = () => {
    query()
}

const plantPageParam = reactive({
    currentPage: 1,
    pageSize: 15,
    categoryId: '',
    userId: store.useUserStore.user.userId,
    familyIds: [],
})

const pageTotal = ref(0)
const plantList = ref()


const query = async () => {
    // console.log(plantPageParam.userId)
    const { data, total } = await usePlantListApi(plantPageParam)
    pageTotal.value = total
    plantList.value = data
}
onMounted(() => {
    query()
})

function handleSizeChange() {
    query()
}
function handleCurrentChange() {
    query()
}

const toDetail = (data: any) => {
    sessionStorage.removeItem("navigation_index")
    router.push({ name: 'detail', params: { id: data } })
}

</script>
  
<style lang="scss" scoped>
.time {
    font-size: 12px;
    color: #999;
}

.author {
    font-size: 12px;
    color: #414141;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button {
    padding: 0;
    min-height: auto;
}

.image {
    width: 100%;
    height: 200px;
    display: block;
}

.plantItem {
    cursor: pointer;
    width: 286px;
}

.plantSelect {
    height: 50px;
    line-height: 50px;
    padding: 20px;
    margin-bottom: 10px;
    border: 1px solid #efefef;
    background-color: #fff;
}

.selectItem {
    margin-right: 20px;
}

.pageBlock {
    text-align: center;
    margin-top: 20px;
    margin-left: 530px;
}
</style>